<style lang="scss" scoped>
.common-module {
  position: absolute;
  width: 100%;

}

.header-container {
  height: 64px;
  line-height: 64px;
  background: #108ee9;
  color: #fff;
  padding: 0 25px 0 15px;
}
</style>

<template>
  <div class="common-module">
    <!-- <img alt="Vue logo" src="@/assets/logo.png">
    <a-button type="primary">Primary</a-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->

    <div>
      <div class="header-container">
        <!-- <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </a-button> -->
        <a-button type="primary" style="padding-left: 8px; padding-right: 8px; font-size: 12px;" :icon="collapsed ? 'menu-unfold' : 'menu-fold'"  @click="toggleCollapsed" />
        <span style="font-size: 12px;">目睹云控制台</span>
        <a-popover title="" trigger="click" placement="bottomLeft" :arrowPointAtCenter="true">
          <template slot="content">
            <p>Content</p>
            <p>Content</p>
          </template>
          <span style="margin-left: 8px; font-size: 12px;">产品</span>
        </a-popover>
      </div>
      <div class="sidebar-container">sidebar</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Button } from 'ant-design-vue';
import HelloWorld from '@/views/components/HelloWorld.vue';


export default {
  name: 'home',
  components: {
    Button,
    HelloWorld,
  },
  data () {
    return {
      collapsed: false,
    }
  },
  methods: {
    toggleCollapsed () {
      this.collapsed = !this.collapsed
    },
  },
};
</script>
